<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Patient } from '@/types/user'
import { showToast, showConfirmDialog } from 'vant'
import Validator from 'id-validator'
import { addPatien, editPatient, delPatient } from '@/api/user'
const options = [
  { text: '男', value: 1 },
  { text: '女', value: 0 }
]
const show = ref(false)
const modify = ref(false)
const title = ref('')
const emit = defineEmits<{
  (e: 'addPatienClick'): void
}>()
// 初始化打开弹窗
const initShow = (val?: Patient) => {
  show.value = !show.value
  if (val) {
    const { name, idCard, defaultFlag, gender, id } = val
    patient.value = { name, idCard, defaultFlag, gender, id }
    modify.value = true
    title.value = '编辑患者'
  } else {
    title.value = '添加患者'
  }
}
defineExpose({ initShow })
const initPatient: Patient = {
  name: '',
  defaultFlag: 0,
  gender: 1,
  idCard: ''
}

// 关闭时触发
const patientShow = () => {
  initShow()
  patient.value = { ...initPatient }
  if (modify.value) return (modify.value = false)
}
const patient = ref({ ...initPatient })
// 计算属性选项式写法
const defaultFlag = computed({
  get() {
    return patient.value.defaultFlag === 1 ? true : false
  },
  set(val) {
    patient.value.defaultFlag = val ? 1 : 0
  }
})
// 提交表单
const validator = new Validator() //取到身份证验证实例化对象
const submit = () => {
  if (!patient.value.name) return showToast('请输入姓名!')
  if (!patient.value.idCard) return showToast('请输入身份证号!')
  const valid = validator.isValid(patient.value.idCard)
  if (!valid) return showToast('请输入合法的身份证!')
  const { sex } = validator.getInfo(patient.value.idCard)
  if (sex !== patient.value.gender) return showToast('性别和身份证信息不符!')
  if (modify.value) {
    editPatient(patient.value)
      .then(() => {
        showToast('编辑患者成功！')
        show.value = false
        emit('addPatienClick')
      })
      .catch(() => {})
  } else {
    addPatien<Patient>(patient.value)
      .then(() => {
        showToast('添加患者成功！')
        emit('addPatienClick')
        show.value = !show.value
      })
      .catch(() => {})
  }
}
// 删除操作
const delPatientClick = () => {
  showConfirmDialog({
    title: '温馨提示',
    message: '您确认要删除该患者档案吗？'
  })
    .then(() => {
      delPatient(patient.value.id)
        .then(() => {
          showToast('删除患者档案成功！')
          show.value = !show.value
          emit('addPatienClick')
        })
        .catch(() => {
          showToast('删除患者档案失败！')
        })
    })
    .catch(() => {
      showToast('您已取消删除患者档案！')
    })
}
</script>
<template>
  <van-popup position="right" v-model:show="show" :style="{ width: '100%', height: '100%' }">
    <cp-nav-bar :patientShow="patientShow" :title="title" right-text="提交" @onClick="submit"></cp-nav-bar>
    <van-form class="form" autocomplete="off">
      <van-field label="真实姓名" placeholder="请输入真实姓名" v-model="patient.name" />
      <van-field label="身份证号" placeholder="请输入身份证号" v-model="patient.idCard" />
      <van-field label="性别">
        <!-- 单选按钮组件 -->
        <template #input>
          <cp-radio :list="options" v-model="patient.gender"></cp-radio>
        </template>
      </van-field>
      <van-field label="默认就诊人">
        <template #input>
          <van-checkbox round v-model="defaultFlag" />
        </template>
      </van-field>
    </van-form>
    <van-action-bar v-if="modify">
      <van-action-bar-button @click="delPatientClick">删除</van-action-bar-button>
    </van-action-bar>
  </van-popup>
</template>
<style lang="scss" scoped>
.form {
  margin-top: 50px;
}
.van-action-bar {
  padding: 0 10px;
  margin-bottom: 10px;
  .van-button {
    color: var(--cp-price);
    background-color: var(--cp-bg);
  }
}
</style>
